<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <!-- <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
          <svg-icon class="primary" :icon-class="$route.meta.icon"/>
          <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
        </div> -->
        <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">
            <div class="report_header_query">
              <el-input prefix-icon="el-icon-search" placeholder="广告名称"  v-model="query.title"></el-input>
            </div>
          </div>
          <div>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryAd">查询</el-button>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['ad.add']">新增</el-button>
          </div>
        </div>
      </div>
<!--      <div>-->
<!--        <svg-icon class="primary" :icon-class="$route.meta.icon"/>-->
<!--        <span class="primary">{{$route.meta.title}}</span>-->
<!--      </div>-->
<!--      <div class="header-button-container">-->
<!--        <el-button :icon="queryType? 'el-icon-search':'el-icon-close'" type="primary"-->
<!--                   @click="chooseClick">{{queryType == false?'隐藏':'查询'}}-->
<!--        </el-button>-->
<!--        <el-button v-permission="['ad.add']" icon="el-icon-plus" type="info" style="margin-left: 10px"-->
<!--                   @click="addClick">新增-->
<!--        </el-button>-->
<!--      </div>-->
    </el-header>
    <div class="pd10">
<!--      <div style="margin-bottom: 10px;display: flex;align-items: center" v-show="queryType == false">-->
<!--        <el-input prefix-icon="el-icon-search" placeholder="广告名称" style="width: 200px" v-model="query.title"></el-input>-->
<!--        <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" @click="queryAd">查询-->
<!--        </el-button>-->
<!--        <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" @click="resetAd">重置-->
<!--        </el-button>-->
<!--      </div>-->
      <el-table
        :data="adForm"
        border
        stripe
        :height="curHeight"
        v-loadMore="[payLoads,'ad-list']"
        style="width: 100%">
        <el-table-column
          label="素材"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <img style="width: 40px;height: 40px;border-radius: 4px" :src="scope.row.thumbnail">
          </template>
        </el-table-column>
        <el-table-column
          label="广告名称"
          align="left"
          prop="title"
        >
        </el-table-column>
        <el-table-column
          label="类型"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag type="success">
              <span>{{scope.row.type | watchType}}</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="标签"
          align="center"
          width="240"
        >
          <template slot-scope="scope">
            <div style="display: flex; flex-wrap: wrap;">
              <div v-for="item in scope.row.tags" style="margin-right:5px; text-align: left; padding-bottom: 5px;">
                <el-tag type="success">
                  <span>{{item.name}}</span>
                </el-tag>
              </div>
            </div>

          </template>
        </el-table-column>
        <el-table-column
          label="链接到"
          align="left"
          prop="typeName"
        >
        </el-table-column>
        <el-table-column
          label="排序"
          align="center"
          width="80"
          prop="orders"
          :render-header="ordersIcons"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.orders" @blur="bulrOrders(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip v-permission="['ad.edit']" class="item" effect="dark" content="编辑" placement="top-start">
                <a @click="editClick(scope.row)">
                  <i style="color: #409EFF" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip v-permission="['ad.del']" class="item" effect="dark" content="删除" placement="top-start">
                <a style="margin-left: 10px" @click="deleteAd(scope.row)">
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--新增标签-->
      <el-dialog title="新增广告" v-el-drag-dialog :visible.sync="dialogFormVisible">
        <el-container>
          <el-main class="popup_content">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px" size="mini">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="标题" prop="title">
                    <el-input v-model="addForm.title"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="素材" prop="thumbnail">
                <single-upload :singleUploadTitle='singleUploadTitle' :key="Math.random()" v-model="addForm.thumbnail"
                               style="display: inline-block"></single-upload>
              </el-form-item>
              <el-form-item label="链接类型" prop="type">
                <el-select style="width: 180px;display: inline-block" v-model="addForm.type" placeholder="请选择状态"
                           @change="changeClick">
                  <el-option label="商品" value="0"></el-option>
                  <el-option label="商品分类" value="1"></el-option>
                  <el-option label="文章" value="2"></el-option>
                  <el-option label="会员中心" value="3"></el-option>
                  <el-option label="优惠券" value="8"></el-option>
                  <el-option label="页面" value="9"></el-option>
                  <el-option label="自定义" value="12"></el-option>
                </el-select>
              </el-form-item>
              <el-row>
                <el-col :span="7">
                  <el-form-item label="颜色" prop="backgroundColor">
                    <el-input v-model="addForm.backgroundColor" placeholder="例如#000000"></el-input>
                  </el-form-item>
                </el-col>
                <colorPicker v-model="addForm.backgroundColor" style=" margin-left:20px;margin-top:5px;z-index: 999;"/>
              </el-row>
              <el-form-item label="位置标签" prop="tagData" >
                <el-select v-model="addForm.tagData" multiple placeholder="请选择标签">
                  <el-option
                    v-for="item in tagForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="链接到" v-show="addForm.type != 12 && addForm.type != 3">
                <el-select v-model="state" value-key="id" @change="selectClick" :loading="loading"
                           :filter-method="remoteMethod"  filterable placeholder="请输入关键词">
                  <el-option
                    v-for="item in linkForm"
                    :key="item.id"
                    :label="item.title"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="链接到" v-show="addForm.type == 12">
                <el-input v-model="addForm.path"></el-input>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" :loading="clicked" @click="saveAd('addForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!--编辑标签-->
      <el-dialog title="编辑广告" v-el-drag-dialog :visible.sync="editVisible">
        <el-container>
          <el-main class="popup_content">
            <el-form ref="editForm" :model="editForm" :rules="rules" label-width="80px" size="mini">
              <el-form-item label="广告名称" prop="title">
                <el-input v-model="editForm.title"></el-input>
              </el-form-item>
              <el-form-item label="素材" prop="thumbnail">
                <single-upload :singleUploadTitle='singleUploadTitle' :key="Math.random()" v-model="editForm.thumbnail"
                               style="display: inline-block"></single-upload>
              </el-form-item>
              <el-form-item label="链接类型" prop="type">
                <el-select v-model="editForm.type" placeholder="请选择状态" style="width: 180px;display: inline-block"
                           @change="changeClick">
                  <el-option label="商品" value="0"></el-option>
                  <el-option label="分类" value="1"></el-option>
                  <el-option label="文章" value="2"></el-option>
                  <el-option label="会员中心" value="3"></el-option>
                  <el-option label="优惠券" value="8"></el-option>
                  <el-option label="页面" value="9"></el-option>
                  <el-option label="自定义" value="12"></el-option>
                </el-select>
              </el-form-item>
              <el-row>
                <el-col :span="7">
                  <el-form-item label="颜色" prop="backgroundColor">
                    <el-input v-model="editForm.backgroundColor" placeholder="例如#000000"></el-input>
                  </el-form-item>
                </el-col>
                <colorPicker v-model="editForm.backgroundColor" style=" margin-left:20px;margin-top:5px;z-index: 999;"/>
              </el-row>
              <el-form-item label="位置标签" prop="tagData">
                <el-select v-model="editForm.tagData" multiple placeholder="请选择标签" >
                  <el-option
                    v-for="item in tagForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="链接到" v-show="editForm.type != 12 && editForm.type != 3">
                <el-select v-model="state"  value-key="id" @change="selectClick" :loading="loading"
                           :filter-method="remoteMethod" filterable placeholder="请输入关键词">
                  <el-option
                    v-for="item in linkForm"
                    :key="item.id"
                    :label="item.title"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="链接到" v-show="editForm.type == 12">
                <el-input v-model="editForm.path"></el-input>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" :loading="clicked" @click="updateAd('editForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-footer class="el-footerBox">
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadAd"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {list, del, find, save, update} from '@/api/ad'
  import {list as tagList} from '@/api/tag'
  import {list as articleList} from '@/api/article'
  import {courseList, gaugeList} from '@/api/search'
  import {list as wxPageList} from '../../api/wxPage'
  import {list as produchList} from '../../api/product'
  import utils from '../../utils/utils.js'
  import Pagination from '@/components/Pagination';
  import SingleUpload from '@/components/Upload/singleUpload'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import loadMore from '@/utils/loadMore.js'
  import {list as productCategory} from '@/api/productCategory'

  export default {
    directives: {elDragDialog, permission, loadMore},
    name: 'ad-list',
    data() {
      return {
        singleUploadTitle:'1420*710',
        number: 1,
        payLoads: '',
        addForm: {
          backgroundColor: '',
          title: '',
          path: '',
          type: '',
          typeId: '',
          typeName: '',
          thumbnail: '',
          tagData: [],
        },
        dialogFormVisible: false,
        rules: {
          title: [
            {required: true, message: '请输入广告名称', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          type: [
            {required: true, message: '请选择广告类型', trigger: 'blur'},
          ],
          thumbnail: [
            {required: true, message: '请选择广告素材', trigger: 'blur'},
          ],
          tagData: [
            {required: true, message: '请选择位置标签', trigger: 'blur'},
          ],
          tagid: [
            {required: true, message: '请选择位置标签', trigger: 'blur'},
          ]
        },
        editVisible: false,
        editForm: {
          id: '',
          title: '',
          path: '',
          backgroundColor: '',
          type: '',
          thumbnail: '',
          typeId: '',
          tagData: [],
          typeName: '',
        },
        adForm: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        queryType: true,
        query: {
          title: '',
        },
        keyword: {
          title: ''
        },
        clicked: false,
        curHeight: null,
        tagForm: [],
        linkForm: [],
        state: '',
        timeout: null,
        sorting: {
          id: '',
          orders: ''
        },
        pageNums: 1,
        pageSizes: 40,
        classificationType: '',
        loadingType: true,
        loading: false,
        adName: '',
      }
    },
    components: {Pagination, SingleUpload},
    created() {
      this.loadAd()

    },
    activated() {
      this.payLoads = new Date().getTime();
    },
    filters: {
      watchType(val) {
        if (val == 0) {
          return '商品'
        } else if (val == 1) {
          return '分类'
        }else if (val == 2) {
          return '文章'
        }else if (val == 3) {
          return '会员中心'
        } else if (val == 8) {
          return '优惠券'
        }else if (val == 9) {
          return '页面'
        } else if (val == 12) {
          return '自定义'
        }
      }
    },
    mounted() {
      this.comeIn()
      this.beforeMount()
      this.tagList()
    },
    methods: {
      saveAd(addForm) {
        console.log(this.addForm.type)
        var _this = this;
        this.$refs[addForm].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true;
            let params = new URLSearchParams();
              _this.addForm.tagData.forEach(function (item) {
                params.append('tagIds', item);
              });
              if (_this.addForm.type == 12) {
                _this.addForm.typeName = _this.addForm.path
              }
            var addForm = {
              title: _this.addForm.title,
              path: _this.addForm.path,
              type: _this.addForm.type,
              backgroundColor: _this.addForm.backgroundColor,
              typeId: _this.addForm.typeId,
              thumbnail: _this.addForm.thumbnail,
              typeName: _this.addForm.typeName,
              orders: _this.adForm.length + 1,
            }
            save(addForm, params).then(response => {
              console.log(response);
              _this.clicked = false;
              _this.dialogFormVisible = false;
              _this.loadAd()
              _this.$message({
                message: response.content,
                offset: 120,
                center: true,
              });
            }).catch(error => {
              _this.clicked = false;
              console.log('error!!')
            });
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
//新增
      addClick() {
        this.addForm.thumbnail = '';
        this.addForm.tagData = [];
        this.addForm.title = '';
        this.addForm.backgroundColor = '';
        this.addForm.path = '';
        this.addForm.type = '';
        this.addForm.typeId = '';
        this.state = '';
        this.typeName = '';
        this.linkForm = [];
        this.dialogFormVisible = true;
        this.pageNums = 1;
        this.adName=''
      },
      //  编辑
      editClick(row) {
        this.editForm.id = row.id;
        this.pageNums = 1;
        this.linkForm = [];
        this.findAd();
        this.editVisible = true;
        this.adName=row.typeName
      },
      findAd() {
        var _this = this;
        _this.editForm.tagData = []
        find(_this.editForm.id).then(response => {
          console.log(response)
          _this.editForm.title = response.data.ad.title;
          _this.editForm.path = response.data.ad.path;
          _this.editForm.thumbnail = response.data.ad.thumbnail;
          _this.editForm.type = JSON.stringify(response.data.ad.type);
          _this.editForm.typeId = response.data.ad.typeId;
          _this.editForm.typeName = response.data.ad.typeName;
          _this.editForm.backgroundColor = response.data.ad.backgroundColor;
          _this.classificationType = response.data.ad.type;

            response.data.ad.tags.forEach(function (item) {
              _this.editForm.tagData.push(item.id)
            });

          if (this.classificationType == 0) {
            this.productClick()
          } else if (this.classificationType == 9) {
            this.pageClick()
          } else if (this.classificationType == 2) {
            this.articleClick()
          }else if (this.classificationType == 1) {
            this.productCategoryClick()
          } else {
            this.linkForm = []
          }
          _this.state = {
            id:response.data.ad.typeId,
            title:response.data.ad.typeName
          }
        }).catch(error => {
          console.log('error!!')
        });
      },
      updateAd(editForm) {
        var _this = this
        this.$refs[editForm].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true;
            let params = new URLSearchParams();

              _this.editForm.tagData.forEach(function (item) {
                params.append('tagIds', item);
              });
            if (_this.editForm.type ==12) {
              _this.editForm.typeName = _this.editForm.path
            }
            var editForm = {
              id: _this.editForm.id,
              title: _this.editForm.title,
              path: _this.editForm.path,
              type: _this.editForm.type,
              backgroundColor: _this.editForm.backgroundColor,
              typeId: _this.editForm.typeId,
              thumbnail: _this.editForm.thumbnail,
              typeName: _this.editForm.typeName
            }
            update(editForm, params).then(response => {
              console.log(response);
              _this.clicked = false;
              _this.editVisible = false;
              _this.loadAd()
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            }).catch(error => {
              _this.clicked = false;
              console.log('error!!')
            });
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 266//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 220//减去页面上固定高度height
            }
          })();
        };
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220//减去页面上固定高度height
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220//减去页面上固定高度height
        }
      },
      deleteAd(data) {
        console.log(data)
        var _this = this;
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data.id).then(response => {
            console.log(response)
            _this.adForm.forEach(function (item, index) {
              if (item.id == data.id) {
                _this.adForm.splice(index, 1)
              }
            });
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {

        })
      },
      queryAd() {
        this.keyword = this.query;
        this.pageNum = 1
        this.loadAd()
      },
      resetAd() {
        this.query.title = '';
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadAd()
      },
      loadAd() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('title', _this.keyword.title);
        list(params).then(response => {
          console.log(response)
          _this.adForm = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },
      tagList() {
        var _this = this
        let params = new URLSearchParams();
        params.append('type', 8)
        params.append('pageSize', 1000)
        tagList(params).then(response => {
          console.log(response)
          _this.tagForm = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      changeClick(val) {
        console.log(val)
        this.addForm.typeId = '';
        this.editForm.typeId = '';
        this.state = '';
        this.typeName = '';
        this.pageNums = 1;
        this.classificationType = val;
        this.linkForm = [];
        this.adName='';
        if (this.classificationType == 0) {
          this.productClick()
        } else if (this.classificationType == 9) {
          this.pageClick()
        } else if (this.classificationType == 2) {
          this.articleClick()
        }else if (this.classificationType == 1) {
          this.productCategoryClick()
        } else {
          this.linkForm = []
        }
      },
      pageClick() {
        var _this = this;
        _this.linkForm = []
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNums);
        params.append('pageSize', _this.pageSizes);
        params.append('name', _this.adName);
        wxPageList(params).then(response => {
          console.log(response)
          response.data.data.forEach(function (item) {
            let page = {
              id: item.id,
              title: item.name,
            }
            _this.linkForm.push(page)
          });
        }).catch(error => {
          console.log('error!!')
        });
      },
      productClick() {
        var _this = this;
        _this.linkForm = []
        console.log('_this.adName--'+_this.adName)
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNums);
        params.append('pageSize', _this.pageSizes);
        params.append('name', _this.adName)
        params.append('isList', true)
        produchList(params).then(response => {
          response.data.data.forEach(function (item) {
            let products = {
              id: item.id,
              title: item.name,
            }
            _this.linkForm.push(products)
          });
        }).catch(error => {
          console.log('error!!')
        });
      },
      productCategoryClick(){
        var _this = this;
        _this.linkForm = []
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNums);
        params.append('pageSize', _this.pageSizes);
        productCategory(params).then(response => {
          response.data.forEach(function (item) {
            let products = {
              id: item.id,
              title: item.name,
            }
            _this.linkForm.push(products)
          });
        }).catch(error => {
          console.log('error!!')
        });
      },
      articleClick() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNums);
        params.append('pageSize', _this.pageSizes);
        params.append('title', _this.adName);
        articleList(params).then(response => {
          // console.log(response)
          response.data.data.forEach(function (item) {
            _this.linkForm.push(item)
          });
          console.log(_this.linkForm)
        }).catch(error => {
          console.log('error')
        })
      },
      bulrOrders(data) {
        console.log(data)
        this.sorting.id = data.id;
        this.sorting.orders = data.orders;
        this.saveSorting();
      },
      saveSorting() {
        var _this = this
        update(_this.sorting).then(response => {
          console.log(response)
          _this.adForm.forEach(function (item) {
            if (item.id == response.data.id) {
              item.orders = response.data.orders
            }
          });
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
        }).catch(error => {
          console.log('error!!')
        });
      },
      ordersIcons(h, {column}) {
        const inReview = '点击下方数字区域可直接更改排序。'
        return h(
          'div', [
            h('span', column.label),
            h('el-tooltip', {
              props: {
                placement: 'top'
              }
            }, [
              h('div', {
                slot: 'content',
                style: {
                  'width': '200px',
                  whiteSpace: 'normal',
                  'margin-bottom': '10px'
                }
              }, inReview),
              h('i', {
                class: 'el-icon-question',
                style: 'color:#888888;margin-left:5px;position:absolute'
              })
            ],)
          ]
        )
      },
      selectClick(item) {
        console.log(item)
        var _this = this;
        // if (item.length != 0) {
        //   if (_this.dialogFormVisible == true) {
        //     _this.addForm.typeId = item[0].id
        //     _this.addForm.typeName = item[0].title
        //   } else if (_this.editVisible == true) {
        //     _this.editForm.typeId = item[0].id;
        //     _this.editForm.typeName = item[0].title
        //   }
        //   console.log(_this.state)
        // } else {
        //   if (_this.dialogFormVisible == true) {
        //     _this.addForm.typeId = ''
        //     _this.addForm.typeName = ''
        //   } else if (_this.editVisible == true) {
        //     _this.editForm.typeId = '';
        //     _this.editForm.typeName = ''
        //   }
        // }
        console.log(this.state)
        if (_this.dialogFormVisible == true) {
          _this.addForm.typeId = item.id
          _this.addForm.typeName = item.title
        } else if (_this.editVisible == true) {
          _this.editForm.typeId = item.id;
          _this.editForm.typeName = item.title
        }

      },
      remoteMethod(query) {
        // console.log(query);
        this.adName = query;
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            if (this.classificationType == 0) {
              this.productClick()
            } else if (this.classificationType == 9) {
              this.pageClick()
            } else if (this.classificationType == 2) {
              this.articleClick()
            } else if (this.classificationType == 1) {
              this.productCategoryClick()
            } else {
              this.linkForm = []
            }
          }, 200);
        } else {
          this.linkForm = [];
        }
      }
    }
  }
</script>
<style scoped>
  /deep/ .m-colorPicker .box {
    width: 270px;
  }

  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
  }

  /deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
  }

  /deep/ .el-dialog__body {
    padding: 0px 20px !important;
  }

  /deep/ .el-main {
    overflow-x: auto;
  }

  .popup_content {
    padding-bottom: 0px !important;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
